<template>
  <div class="jd-banner" @mouseover="stop" @mouseout="start">
    <ul>
      <li style="opacity: 1"><img src="./assets/jd/q1.jpg" alt="" /></li>
      <li><img src="./assets/jd/q2.jpg" alt="" /></li>
      <li><img src="./assets/jd/q3.jpg" alt="" /></li>
      <li><img src="./assets/jd/q4.jpg" alt="" /></li>
      <li><img src="./assets/jd/q5.jpg" alt="" /></li>
    </ul>
    <ol>
      <li class="active"><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
    </ol>
    <div class="ctrls">
      <a href="#" class="prev" @click.prevent="prev">&lt;</a>
      <a href="#" class="next" @click.prevent="next">&gt;</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      timerID: 0,
    };
  },
  methods: {
    // 上一页
    prev() {
      this.num--;
      if (this.num < 0) {
        this.num = 4;
      }
      this.common();
    },
    // 下一页
    next() {
      this.num++;
      if (this.num > 4) {
        this.num = 0;
      }
      this.common();
    },
    // 公共部分
    common() {
      document.querySelector(".active").classList.remove("active");
      Array.from(document.querySelectorAll("ol li"))[this.num].classList.add(
        "active"
      );
      document.querySelector("ul li[style]").removeAttribute("style");
      Array.from(document.querySelectorAll("ul li"))[
        this.num
      ].style.opacity = 1;
    },
    // 定时器
    setTime() {
      this.timerID = setInterval(() => {
        this.next();
      }, 2000);
    },
    // 鼠标经过轮播图停止播放
    stop() {
      clearInterval(this.timerID);
    },
    // 鼠标离开轮播图播放
    start() {
      this.timerID = setInterval(() => {
        this.next();
      }, 2000);
    },
  },
  mounted() {
    // 调用定时器
    this.setTime();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-banner {
  position: relative;
  width: 590px;
  height: 470px;
  margin: 100px auto;
}

ul li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

ol {
  display: flex;
  position: absolute;
  left: 40px;
  bottom: 30px;
}

ol li {
  padding: 3px;
  border-radius: 50%;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.2);
}

ol li span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

ol li.active span {
  background: rgba(255, 255, 255, 1);
}

.ctrls a {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 60px;
  margin-top: -30px;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: #fff;
  opacity: 0.8;
}

.ctrls a.prev {
  left: 0;
}

.ctrls a.next {
  right: 0;
}
</style>